<template>
  <view>
    <view class="user-center-top">
      <view class="user-center-head-img" v-if="isLogin">
        <cm-img img-class="cm-circle" width="100%" height="100%"
          :src="user.avatar"></cm-img>
      </view>
      <view class="user-center-head-img" v-else>
        <cm-img img-class="cm-circle" width="100%" height="100%"></cm-img>
      </view>
    </view>
    
    <cm-card :is-shadow="false">
      <view class="cm-padding-10" v-if="isLogin">
        <view class="user-center-info-first">
          <view class="cm-padding-right-5">{{ user.nickname }}</view>
          <cm-button type="error" outlined cm-class="cm-flex-s-0" :cm-style="{ padding: '6px 10px' }"
            @click="infoClickHandler">账号信息</cm-button>
        </view>
        <view class="user-center-info-second" v-if="user.motto !== ''">{{ user.motto }}</view>
        <view class="user-center-info-second" v-else>无简介信息</view>
      </view>
      <view class="user-center-no-login" v-else>
        <cm-button :cm-style="{ padding: '6px 10px' }" type="primary" outlined open-type="getUserInfo" @getuserinfo="loginHandler">点此登录</cm-button>
      </view>
    </cm-card>
    
    <cm-card cm-class="cm-margin-top-10" :is-shadow="false">
      <view class="user-center-active-item cm-padding-10 cm-flex cm-flex-a-center cm-flex-j-between app-border-color_ex-bottom"
        v-if="!productEnv.hidePay"
        @click="buyHandler">
        <view class="cm-flex cm-flex-a-center">
          <cm-icon type="iconfont icon-store"></cm-icon>
          <text class="cm-padding-left-10">应用购买情况</text>
        </view>
        <cm-icon type="iconfont icon-arrow-right"></cm-icon>
      </view>
      <view class="user-center-active-item cm-padding-10 cm-flex cm-flex-a-center cm-flex-j-between app-border-color_ex-bottom"
        @click="baguaHandler">
        <view class="cm-flex cm-flex-a-center">
          <cm-icon type="iconfont icon-feeds"></cm-icon>
          <text class="cm-padding-left-10">我的排盘</text>
        </view>
        <cm-icon type="iconfont icon-arrow-right"></cm-icon>
      </view>
      <view class="user-center-active-item cm-padding-10 cm-flex cm-flex-a-center cm-flex-j-between app-border-color_ex-bottom"
        @click="configHandler">
        <view class="cm-flex cm-flex-a-center">
          <cm-icon type="iconfont icon-set"></cm-icon>
          <text class="cm-padding-left-10">应用设置</text>
        </view>
        <cm-icon type="iconfont icon-arrow-right"></cm-icon>
      </view>
    </cm-card>
    
    <cm-popup ref="infoPopup" direction="right" width="100%">
      <view class="cm-flex cm-flex-a-center user-center-info-bar" :style="[infoBarStyle]">
        <cm-icon type="iconfont icon-arrow-lift" @click="infoCloseHandler"></cm-icon>
        <text class="cm-margin-left-5">个人信息</text>
      </view>
      <view class="app-text-color-grey cm-text-14 cm-padding-10">点击以下栏目可修改对应的账户信息</view>
      <view class="user-center-info-line app-border-color_ex-top app-border-color_ex-bottom">
        <view class="cm-flex cm-flex-a-center cm-flex-j-between"
          @click="setUserHandler('nickname')">
          <view class="cm-flex cm-flex-a-center">
            <view style="width: 80px;">昵称</view>
            <view>{{ user.nickname }}</view>
          </view>
          <cm-icon type="iconfont icon-arrow-right"></cm-icon>
        </view>             
      </view>
      <view class="user-center-info-line app-border-color_ex-bottom">
        <view class="cm-flex cm-flex-a-center cm-flex-j-between"
          @click="setUserHandler('motto')">
          <view class="cm-flex cm-flex-a-center">
            <view style="width: 80px;">简介信息</view>
            <view v-if="user.motto === ''">未设置</view>
            <view v-else>{{ user.motto }}</view>
          </view>
          <cm-icon type="iconfont icon-arrow-right"></cm-icon>
        </view>             
      </view>
      <view class="user-center-info-line app-border-color_ex-bottom">
        <view class="cm-flex cm-flex-a-center cm-flex-j-between"
          @click="bindMobileHandler">
          <view class="cm-flex cm-flex-a-center">
            <view style="width: 80px;">手机</view>
            <view v-if="user.mobile === ''">未设置</view>
            <view v-else>{{ user.mobile }}</view>
          </view>
          <cm-icon type="iconfont icon-arrow-right"></cm-icon>
        </view>             
      </view>
    </cm-popup>
    
    <cm-modal ref="inputModal" height="170px" type="input" :title="'设置新' + tagNames[currentSet]"
      :input-holder="'请输入新的' + tagNames[currentSet]"
      @confirm="updateUserHandler">
    </cm-modal>
  </view>
</template>

<script src="./userCenter.js">
</script>

<style lang="stylus">
@import './userCenter.styl'
</style>
